<template>
	<div>
		<div class="flex">
			<zbStore ref="storeRef" @selStore="selStore" />
			<div class="flex1" style="width: 60%">
				<zbTable ref="tableRef" :api-fun="get_list" @action="action">
					<template #toolbar>
						<a-space>
							<a-button type="primary" class="ele-btn-icon" @click="openEdit()">
								<template #icon>
									<plus-outlined />
								</template>
								<span>新建</span>
							</a-button>
							<a-button type="dashed" class="ele-btn-icon" @click="daochu()">
								<template #icon>
									<upload-outlined />
								</template>
								<span>导出</span>
							</a-button>
						</a-space>
					</template>
				</zbTable>
			</div>
		</div>

		<user-edit v-if="showEdit" v-model:visible="showEdit" :actionStatus="actionStatus" :editData="editData" :storeCode="storeCode" @done="done" />
		<!-- <a-modal
      v-model:visible="popconfirm"
      title="提示"
      centered
      :width="260"
      @ok="delFun"
    >
      <p>删除后无法恢复，请谨慎操作</p>
    </a-modal> -->
		<check-data v-if="showCheck" v-model:visible="showCheck" :editData="editData" @done="done" />
	</div>
</template>

<script setup>
import { ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { PlusOutlined, UploadOutlined, DownOutlined, ClearOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { actionFn } from '@/utils/action.js';
import { daochuFn } from '@/utils/daochu.js';
import zbTable from '@/components/zbTable/jewelryIndex.vue';
import zbStore from '@/components/zbStore/index.vue';
import checkData from './components/check-data.vue';
import userEdit from './components/user-edit.vue';
import { get_list, cancel_purchase, del_receipts, back_verify, cancel_verify, confirm_purchase } from '@/api/jewelry/receipts_group';

// 是否显示编辑弹窗
const showEdit = ref(false);
const showCheck = ref(false);
// 编辑数据
const editData = ref({});
// 编辑按钮数据
const actionData = ref({});
// 获取子组件
const tableRef = ref(null);
const actionStatus = ref('add');
const storeCode = ref(null);
const popconfirm = ref(false);

const selStore = val => {
	storeCode.value = String(val.code);
};
/* 打开添加弹窗 */
const openEdit = () => {
	if (!storeCode.value) {
		return message.error('请选择门店');
	}
	editData.value.id = '';
	editData.value.code = '';
	showEdit.value = true;
	actionStatus.value = 'add';
	actionData.value = { url: '/jewelry/receipts_group/add' };
};
/* 打开编辑弹窗 */
const action = data => {
	console.log(data);
	editData.value.id = data.row_data.id;
	editData.value.code = data.row_data.code;
	actionData.value = data.action_data;
	if (data.action_data.type == 'edit') {
		showEdit.value = true;
		actionStatus.value = 'edit';
	} else if (data.action_data.type == 'cancel') {
		Modal.confirm({
			title: '提示',
			content: '确定作废?',
			maskClosable: true,
			onOk: () => {
				zuofeiOk();
			}
		});
	} else if (data.action_data.type == 'delete') {
		Modal.confirm({
			title: '提示',
			content: '确定删除，删除后不可恢复?',
			maskClosable: true,
			onOk: () => {
				shanchu();
			}
		});
	} else if (data.action_data.type == 'verify') {
		showCheck.value = true;
	} else if (data.action_data.type == 'back_verify') {
		Modal.confirm({
			title: '提示',
			content: '确定反审?',
			maskClosable: true,
			onOk: () => {
				fanshen();
			}
		});
	} else if (data.action_data.type == 'cancel_verify') {
		Modal.confirm({
			title: '提示',
			content: '确定取消审核?',
			maskClosable: true,
			onOk: () => {
				cancelVerify();
			}
		});
	} else if (data.action_data.type == 'confirm') {
		Modal.confirm({
			title: '提示',
			content: '确定提交审核?',
			maskClosable: true,
			onOk: () => {
				confirmPurchase();
			}
		});
	}
};
const zuofeiOk = () => {
	cancel_purchase({ code: editData.value.code })
		.then(res => {
			reloadTable();
			message.success(res.msg);
		})
		.catch(e => {
			message.error(e);
		});
};
const shanchu = () => {
	del_receipts({ code: editData.value.code })
		.then(res => {
			reloadTable();
			message.success(res.msg);
		})
		.catch(e => {
			message.error(e);
		});
};
const fanshen = () => {
	back_verify({ code: editData.value.code })
		.then(res => {
			reloadTable();
			message.success(res.msg);
		})
		.catch(e => {
			message.error(e);
		});
};
const cancelVerify = () => {
	cancel_verify({ code: editData.value.code })
		.then(res => {
			reloadTable();
			message.success(res.msg);
		})
		.catch(e => {
			message.error(e);
		});
};
const confirmPurchase = () => {
	confirm_purchase({ code: editData.value.code })
		.then(res => {
			reloadTable();
			message.success(res.msg);
		})
		.catch(e => {
			message.error(e);
		});
};
const done = form => {
	actionFn(actionData.value, form, reloadTable);
};
const reloadTable = () => {
	showEdit.value = false;
	showCheck.value = false;
	tableRef.value.reload();
};
const daochu = ()=>{
	  let data = {
		  url:'jewelry/receipts_group/export',
		  params:{},
		  filename:'首饰出入柜列表'
	  }
	  daochuFn(data);
	};
</script>
